<template>
	<view class="width100">
		<bar-title bgColor="bg-white" isBack>
			<block slot="content">标签</block>
			<block slot="right">
				<view class="action">
					<view class="title" @tap="commitclick()">提交</view>
				</view>
			</block>
		</bar-title>


		<view class="cu-bar bg-white margin-top">
			<view class='action'>
				<text class='cuIcon-title text-blue'></text>我的标签(点击我的标签可以移除)
			</view>
		</view>

		<view class='padding-sm flex flex-wrap bg-white'>
			<view class="padding-xs" v-for="(item,index) in mytaglist" :key="index">
				<view class='cu-tag round' @tap="mytagdelete(item)">{{item.tagname}}</view>
			</view>
		</view>

		<view class="cu-bar bg-white margin-top">
			<view class='action'>
				<text class='cuIcon-title text-blue'></text>所有标签(点击所有标签添加到我的标签)
			</view>
		</view>

		<view class='padding-sm flex flex-wrap bg-white'>
			<view class="padding-xs" v-for="(item,index) in alltaglist" :key="index">
				<view class='cu-tag round' @tap="addmytag(item)">{{item.tagname}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				mytaglist: [],
				alltaglist: [],
				nowTime: ''
			};
		},
		
		computed: {
			...mapState({
				"userInfo": state => state.userInfo
			}),
		},
		methods: {

			async _initData() {
				let alltaglist = await this.$apis.getalltag();
				let shoptag = this.userInfo.shoptag
				if (shoptag) {
					shoptag = shoptag.split(',')
					this.alltaglist = alltaglist.filter(item => {
						const oldIndex = shoptag.indexOf(item.tagname)
						if (oldIndex > -1) {
							this.mytaglist.push(item);
						}
						return oldIndex < 0
					})
				} else {
					this.alltaglist = alltaglist
				}
				
			},
			commitclick() {
				console.log(this.mytaglist.length);
				if (this.mytaglist.length < 1) {
					wx.showToast({
						title: "请先选择标签",
						icon: "none",
						duration: 2000
					});
					return;
				}
				console.log(this.mytaglist.length);
				var tagid = '';
				for (let i = 0; i < this.mytaglist.length; i++) {
					let item = this.mytaglist[i];
					if (i < this.mytaglist.length - 1) {
						tagid = tagid + item.tagid + '!';
					} else {
						tagid = tagid + item.tagid;
					}
				}
				this.updatshoptag({
					tagids: tagids
				});
			},
			async updatshoptag(req) {	
				var nowTime = new Date();
				if (nowTime - this.lastTime < 2000) {
					console.log('阻断')
					return;
				}
				this.lastTime = nowTime
				await this.$apis.upshoptag(req);
				uni.showToast({
					title: "保存成功",
					duration: 2000,
					success: () => {
						setTimeout(() => {
							let newsData =  JSON.parse(JSON.stringify(this.userInfo))
							let newsTag =  this.mytaglist.map(item => {
								return item.tagname
							})
							newsData.shoptag = newsTag.join(',');
							this.$store.commit('SET_USERINFO', newsData)
							this.$backPage()
						}, 1000)
						this.$store.dispatch('finishTask', '202020202026')
					}
				});
			},
			mytagdelete(item) {
				if (this.mytaglist.length > 0) {
					for (let s of this.mytaglist) {
						if (s.tagid == item.tagid) {
							this.alltaglist.push(item);
							this.mytaglist.splice(this.mytaglist.indexOf(item), 1);
						}
					}
				}

			},
			addmytag(item) {
				if (this.mytaglist.length >= 3) {
					uni.showToast({
						title: "最多只能选3个哦",
						duration: 2000,
						icon: 'none'
					});
					return
				}
				for (let s of this.alltaglist) {
					if (s.tagid == item.tagid) {
						this.mytaglist.push(item);
						this.alltaglist.splice(this.alltaglist.indexOf(item), 1);
					}
				}

			}

		},

		onLoad() {
			this._initData();
		}
	};
</script>

<style></style>
